<template>
  <div id="onlyMonitor" class="onlyMonitor">
    <!--  桥梁选择  -->
    <div class="search">
      <el-button
        class="seletBtn"
        size="small"
        type="success"
        icon="el-icon-circle-plus-outline"
        @click="selectBridge"
        >桥梁选择</el-button
      >
      <el-radio-group size="small" v-model="selectPoint">
        <el-radio-button label="1">长江大桥</el-radio-button>
        <el-radio-button label="2">长江二桥</el-radio-button>
        <el-radio-button label="3">长江三桥</el-radio-button>
        <el-radio-button label="4">长江八桥</el-radio-button>
      </el-radio-group>
    </div>
    <CardContainer headerName="长江大桥简介">
      <template slot="card-content">
        <div class="bridge-init">
          南京长江大桥是中国东部地区交通的关键节点，上层为公路桥，长4589米，车行道宽15米，可容4辆大型汽车并行，两侧各有2米多宽的人行道，连通104国道、312国道等跨江公路，是沟通南京江北新区与江南主城的要道之一；下层为双轨复线铁路桥宽14米、全长6772米，连接津浦铁路与沪宁铁路干线,是国家南北交通要津和命脉。大桥由正桥和引桥两部分组成，正桥9墩10跨，长1576米，最大跨度160米。通航净空宽度120米，桥下通航净空高度为设计最高通航水位以上24米，可通过5000吨级海轮。
        </div>
      </template>
    </CardContainer>

    <!--  桥梁选择  -->
    <div class="search changeBridge">
      <el-radio-group size="small" v-model="selectPoint">
        <el-radio-button label="1">长江大桥</el-radio-button>
        <el-radio-button label="2">南引桥</el-radio-button>
        <el-radio-button label="3">北引桥</el-radio-button>
      </el-radio-group>
    </div>
    <!-- 桥梁卡片  桥立面图 -->
    <div class="bridge-card-pic">
      <!-- 卡片 -->
      <div class="b-card">
        <CardContainer headerName="桥梁卡片">
          <template slot="card-content">
            <!-- el-tab 一般资料 上部结构 下部结构 附属工程 附挂管线 -->
            <BridgeCard></BridgeCard>
          </template>
        </CardContainer>
      </div>
      <div class="b-pic">
        <div>
          <CardContainer headerName="桥立面图">
            <template slot="card-content">
              <img
                class="bridge-img"
                src="@/assets/healthMonitorAssets/img/bridge.png"
                alt
              />
            </template>
          </CardContainer>
        </div>
        <div>
          <CardContainer headerName="桥侧面图">
            <template slot="card-content">
              <img
                class="bridge-img"
                src="@/assets/healthMonitorAssets/img/bridge.png"
                alt
              />
            </template>
          </CardContainer>
        </div>
      </div>
    </div>
    <SelectBridge ref="selectBridge" @getData = "getData"></SelectBridge>
  </div>
</template>

<script>
// card 容器组件
import CardContainer from "../components/CardContainer";
// 搜索tab容器
import TabSearch from "../components/TabSearch";
// 表格容器
import TableList from "../components/TableList";
// 桥梁卡片
import BridgeCard from "./BridgeCard";
// echarts
import echarts from "echarts";
// 滚动条
import VuePerfectScrollbar from "vue-perfect-scrollbar";

import CarList from "../components/CarList";

import deseaseImage from "../../../assets/healthMonitorAssets/img/icon_disease.jpg";

import SelectBridge from "../components/SelectBridge"


export default {
  data () {
    return {
      selectPoint: "1",
      CarPie: "",
      settings: {
        // perfectscrollbar settings
        maxScrollbarLength: 30,
        wheelSpeed: 1,
        swipeEasing: true,
      },
      diseaseData: [{
        image: deseaseImage,
        info: '绣蚀，油漆脱落，绣蚀，油漆脱落绣蚀',
        title: '绣蚀，油漆脱落'
      }, {
        image: deseaseImage,
        info: '绣蚀，油漆脱落，绣蚀，油漆脱落绣蚀',
        title: '绣蚀，油漆脱落'
      }, {
        image: deseaseImage,
        info: '绣蚀，油漆脱落，绣蚀，油漆脱落绣蚀',
        title: '绣蚀，油漆脱落'
      }, {
        image: deseaseImage,
        info: '绣蚀，油漆脱落，绣蚀，油漆脱落绣蚀',
        title: '绣蚀，油漆脱落'
      }, {
        image: deseaseImage,
        info: '绣蚀，油漆脱落，绣蚀，油漆脱落绣蚀',
        title: '绣蚀，油漆脱落'
      }, {
        image: deseaseImage,
        info: '绣蚀，油漆脱落，绣蚀，油漆脱落绣蚀',
        title: '绣蚀，油漆脱落'
      }],
      trendLine: null,
      trendPie: null
    };
  },
  components: {
    CardContainer,
    TabSearch,
    TableList,
    BridgeCard,
    VuePerfectScrollbar,
    CarList,
    SelectBridge
  },
  mounted () {
    this.drawPie();
    this.drawLine();
    this.drawTrendPie();
    // 监听窗口变化 - 多个图表同时刷新
    window.addEventListener("resize", () => {
      this.CarPie.resize();
      this.trendLine.resize();
      this.trendPie.resize();
    });
  },
  methods: {
    // selectBridge
    selectBridge(){
      // console.log(this.$refs.selectBridge)
      this.$refs.selectBridge.init();

    },
    getData(val){
      // console.log("选择桥梁的数据",val)
    },



    drawPie () {
      // 基于准备好的dom，初始化echarts实例
      this.CarPie = new echarts.init(document.getElementById("CarPie"));
      // 绘制图表
      this.CarPie.setOption({
        backgroundColor: "#FFF",
        legend: {
          orient: "vertical",
          top: "center",
          right: "10%",
          data: ["小车型", "中型车", "大型车", "大货车", "特种车", "其它车"],
          textStyle: {
            color: "##666666",
            fontSize: 12,
          },
          itemWidth: 12,
          itemHeight: 10,
          formatter: (data) => {
            return data + "  " + "30";
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "车型对比",
            type: "pie",
            radius: ["30%", "80%"],
            center: ["40%", "50%"],
            roseType: "radius",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 1,
                name: "小车型",
                itemStyle: {
                  color: "#457CE0",
                },
              },
              {
                value: 2,
                name: "中型车",
                itemStyle: {
                  color: "#8C55E1",
                },
              },
              {
                value: 3,
                name: "大型车",
                itemStyle: {
                  color: "#33D6CF",
                },
              },
              {
                value: 4,
                name: "大货车",
                itemStyle: {
                  color: "#34D17E",
                },
              },
              {
                value: 5,
                name: "特种车",
                itemStyle: {
                  color: "#F9E035",
                },
              },
              {
                value: 5,
                name: "其它车",
                itemStyle: {
                  color: "#FDAA5E",
                },
              },
            ],
          },
        ],
      });
    },
    drawLine () {
      this.trendLine = new echarts.init(document.getElementById("trend-line"));
      this.trendLine.setOption({
        grid: {
          top: '15%',
          right: '5%',
          left: '5%',
          bottom: '12%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [{
          type: 'category',
          data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'],
          axisLine: {
            show: true,
            lineStyle: {
              color: "#E5E6EB"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#E5E6EB"
            }
          },
          boundaryGap: false,
          axisLabel: {
            color: "#A7A6AF",
            fontSize: 15
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          splitNumber: 4,
          splitLine: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#F5F6FA', '#fff']
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#E5E6EB"
            },
          },
          axisLabel: {
            color: "#A7A6AF",
            fontSize: 15
          }
        }],
        series: [{
          name: '',
          data: [0.00, 0.40, 0.20, 0.50, 0.30, 0.50, 0.70, 0.80, 0.10, 0.40, 0.30, 0.80, 0.50],
          type: 'line',
          symbol: 'emptyCircle',
          symbolSize: 8,
          lineStyle: {
            color: '#699EE5',
            shadowBlur: 12,
            shadowColor: 'rgb(33,148,246,0.5)',
            shadowOffsetX: 1,
            shadowOffsetY: 1
          },
          itemStyle: {
            color: '#699EE5',
            borderWidth: 1
          }
        }]
      });
    },
    drawTrendPie () {
      this.trendPie = new echarts.init(document.getElementById("trend-pie"));
      this.trendPie.setOption({
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: "{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          right: '15%',
          align: 'left',
          top: 'middle',
          data: ['桥面系', '下部结构', '上部结构']
        },
        series: [
          {
            name: '内',
            type: 'pie',
            radius: [0, '40%'],
            center: ['30%', '50%'],
            labelLine: {
              show: false
            },
            label: {
              show: false
            },
            selectedOffset: 2,
            data: [
              { value: 335, name: '桥面系', itemStyle: { color: "#16d7e3" } },
              { value: 679, name: '下部结构', itemStyle: { color: "#2089cf" } },
              { value: 679, name: '上部结构', itemStyle: { color: "#91d9e3" } },
            ]
          },
          {
            name: '外',
            type: 'pie',
            radius: ['55%', '75%'],
            center: ['30%', '50%'],
            labelLine: {
              show: false
            },
            label: {
              show: false
            },
            selectedOffset: 2,
            data: [
              {
                value: 135,
                name: '1',

                itemStyle: {
                  color: '#54dde3'
                }
              },
              {
                value: 200,
                name: '2',
                itemStyle: {
                  color: '#91d9e3'
                }
              },
              {
                value: 310,
                name: '3',
                itemStyle: {
                  color: "#348ecf"
                }
              },
              {
                value: 234,
                name: '4',
                itemStyle: {
                  color: "#4e93cf"
                }
              },
              {
                value: 35,
                name: '5',
                itemStyle: {
                  color: "#6e9dcf"
                }
              },
              {
                value: 100,
                name: '6',
                itemStyle: {
                  color: "#89a3cf"
                }
              },

            ]
          }
        ]
      });
    }
  },
};
</script>

<style lang="scss">
.onlyMonitor {
  margin-bottom: 20px;
}
.search {
  display: flex;
  justify-content: start;
  background: #fff;
  padding: 15px 20px;
  margin-bottom: 15px;
  border-radius: 3px;
  .seletBtn {
    margin-right: 20px;
  }
}
.bridge-init {
  line-height: 30px;
  font-size: 14px;
  margin-top: 15px;
  text-indent: 2em;
}
.changeBridge {
  margin-top: 15px;
}
// 桥梁卡片 截面图
.bridge-card-pic {
  width: 100%;
  height: 744px;
}
.bridge-card-pic {
  display: flex;
  justify-content: space-between;
  .b-card {
    width: calc(100% - 397px);
    height: 100%;
    background: #fff;
  }
  .b-pic {
    width: 382px;
    height: calc(100% + 15px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & > div {
      height: calc(50% - 7.5px);
      background: #fff;
    }
  }
  .bridge-img {
    width: 98%;
    height: 100%;
    margin-top: 20px;
  }
}
// car
.car-content {
  width: 100%;
  height: 270px;
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  & > div {
    width: calc((100% - 30px) / 3);
    height: 100%;
    background: #fff;
  }
}
#CarPie {
  height: 200px;
  margin-top: 10px;
}
.carList {
  height: 210px;
}
.todayAll {
  height: 210px;
}
.todayAll-top {
  height: 50%;
  display: flex;
  justify-content: space-between;
  div {
    width: 50%;
    height: 100%;
  }
  padding-top: 25px;
  padding-left: 10px;
}
.todayAll-bottom {
  height: 50%;
  text-align: center;
  img {
    width: 95%;
    margin-top: 20px;
  }
}
.top-num1 {
  display: flex;
  justify-content: start;
}
.top-number {
  position: relative;
  left: -28%;
  top: -5px;
  p {
    color: #a9b3c4;
  }
}
// 病害分布
.diseaseDistribution {
  margin-top: 30px;
}
.Distribution-content {
  display: flex;
  justify-content: space-between;
  height: 320px;
  .Distribution-content-left {
    width: calc(100% - 345px);
    .img {
      width: 100%;
    }
    .top {
      height: 80px;
      display: flex;
      justify-content: start;
      & > div {
        display: flex;
        justify-content: start;
        margin-top: 30px;
        img {
          margin-right: 10px;
        }
        & > div:last-child {
          margin-right: 50px;
          p {
            font-size: 16px;
            font-weight: bold;
          }
          p:last-child {
            font-size: 12px;
            color: #666666;
            font-weight: 500;
          }
        }
      }
    }
  }
  .Distribution-content-right {
    width: 345px;
    border: 1px solid rgba(238, 239, 243, 1);
    margin-top: 20px;
  }
  .disease {
    padding: 10px;
    width: 100%;
    height: 100%;
    h3 {
      font-size: 16px;
      font-weight: 500;
      color: rgba(68, 68, 68, 1);
      line-height: 45px;
    }
    &-line {
      display: flex;
      margin-bottom: 20px;
    }
    &-left {
      flex: 0 0 44px;
      height: 44px;
      border-radius: 4px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        border: 1px solid rgba(238, 239, 243, 1);
      }
    }
    &-right {
      flex: 1;
      padding-left: 10px;

      h4 {
        font-size: 14px;
        font-weight: 500;
        color: rgba(102, 102, 102, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 22px;
      }
      p {
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 22px;
      }
    }
  }
}

.overView {
  margin-top: 30px;
}
.trend {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 260px;
  margin-top: 30px;
  &-left {
    width: calc(100% - 397px);
    height: 100%;
    background: #fff;
  }
  &-line {
    width: 100%;
    height: 185px;
  }
  &-right {
    width: 382px;
    height: 100%;
    background: #fff;
  }
  &-pie {
    width: 100%;
    height: 185px;
  }
}
</style>
